<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="02.css" />
  </head>
  <body>
    <div>
      <div class="dow-img">
        <div class="img-mys">
          <img
            style="width: 1.2rem; height: 0.4rem; margin-right: 1.2rem"
            src="../图片/index/logo.jpg"
          />
          <img src="../图片/index/my.jpg" />
          <img src="../图片/index/xiazai.jpg" />
        </div>
      </div>
    </div>
    <div class="top-two">
      &nbsp;&nbsp;&nbsp;
      <span>首页</span>
      <span>></span>
      <a style="color: black" href="../登录-我的/01.html"><span>我的</span></a>
      <span>></span>
      <span>登录</span>
    </div>
    <div>
      <ul class="login">
        <li class="li-1 ok">普通登录</li>
        <li class="li-2">验证码快捷登录</li>
      </ul>
    </div>
    <div id="shortcut">
      <div class="item" style="display: block">
        <input type="text" placeholder="请输入手机号码" /><br />
        <input type="password" placeholder="请输入密码" />
        <a href="../欢迎登录/05.html">
          <button
            style="
              width: 3.5rem;
              height: 0.45rem;
              margin-left: 0.1rem;
              margin-top: 0.1rem;
              color: #fff;
              background-color: #ff8a00;
              border: none;
            "
          >
            立即登录
          </button>
        </a>

        <p
          style="
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
          "
        >
          <span style="margin-left: 0.1rem; color: #ff8a00">立即注册</span>
          <span style="margin-right: 0.1rem">忘记密码</span>
        </p>
      </div>
      <div class="item">
        <input type="text" placeholder="请输入手机号码" />
        <button
          style="
            position: absolute;
            width: 0.8rem;
            height: 0.3rem;
            left: 2.7rem;
            top: 0.05rem;
            background-color: #fff;
            border-color: #dfdcdc;
          "
        >
          发送验证码
        </button>
        <br />
        <input type="password" placeholder="请输入短信中的验证码" />
        <a href="../欢迎登录/05.html">
          <button
            style="
              width: 3.5rem;
              height: 0.45rem;
              margin-left: 0.1rem;
              margin-top: 0.1rem;
              color: #fff;
              background-color: #ff8a00;
              border: none;
            "
          >
            验证并登录
          </button>
        </a>
        <p
          style="
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
          "
        >
          <span style="margin-left: 0.1rem; color: #ff8a00">立即注册</span>
          <a href="../找回密码/03.html">
            <span style="margin-right: 0.1rem">忘记密码</span>
          </a>
        </p>
      </div>
    </div>
    <script src="../页面缩放/页面缩放.js"></script>
    <script>
      var lis = document.querySelectorAll("li");
      var items = document.querySelectorAll(".item");
      for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("index", i);
        lis[i].onclick = function () {
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
          }
          this.className = "ok";
          var index = this.getAttribute("index");
          for (var i = 0; i < items.length; i++) {
            items[i].style.display = "none";
          }
          items[index].style.display = "block";
        };
      }
    </script>
  </body>
</html>
